<template>
  <div class="list">
    <div class="bookList" v-for="(v,i) in cartList" :key="i">
      <div class="img">
        <img :src="v.image" alt />
      </div>
      <div class="name">{{v.name}}</div>
      <div class="mask" v-if="v.checked"></div>
      <van-checkbox class="checkboxClass" v-model="v.checked" shape="square"></van-checkbox>
    </div>

    <div class="bookList" v-for="(v,i) in itemList" :key="v.name" @click="itemComBool=true;actItem=v">
      <div class="img" style="background:red;"></div>
      <div class="name">{{v.name}}</div>
    </div>

    <!-- 功能栏 -->
    <FooterBar v-if="footerBarBool" :checkList="checklist"></FooterBar>
    <!-- 分组组件 -->
    <ItemCom v-if="itemComBool" :actItem='actItem' @back='itemComBool=false'/>
  </div>
</template>

<script>
import { mapState } from "vuex";
import FooterBar from "../../components/footerBar/footerBar";
import ItemCom from "./components/itemCom";
export default {
  data() {
    return {
      itemComBool: false,
      actItem: null,
    };
  },
  computed: {
    ...mapState(["cartList", "itemList"]),
    footerBarBool() {
      // some => 一项为真则真
      return this.cartList.some((v, i) => {
        return v.checked;
      });
    },
    checklist() {
      // 返回所以选中
      return this.cartList.filter((v, i) => {
        return v.checked;
      });
    }
  },
  components: {
    FooterBar,
    ItemCom
  }
};
</script>

<style lang='scss'>
.list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.bookList {
  width: 80px;
  border: 1px solid #ccc;
  margin: 10px;
  height: 120px;
  position: relative;
  .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
  }
  .checkboxClass {
    z-index: 2;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
  .img {
    width: 80px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .name {
    line-height: 30px;
    font-size: 12px;
    text-align: center;
  }
}
</style>